<template>
	<view>
		<u-navbar placeholder >
			<view class="back" @tap="back" slot="left"><i class="iconfont icon-cha"></i></view>
		</u-navbar>
		
		<view class="logo">
			<u--image :src="logo"  height="80px" ></u--image>
    </view>
    <view class="form">
      <!-- 账号密码登录 -->
     <view v-if="status==1">
        <view class="from-type">
        <view>账号密码登录</view>
        <span @tap="status=2">验证码快捷登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </view>
			<view class="form-uni">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="form1" errorType="toast">
			<u-form-item prop="account" borderBottom  >
				<u--input v-model="form.account" placeholder="手机号 / 邮箱" border="none" clearable></u--input>
			</u-form-item>
			<u-form-item  prop="password" borderBottom  >
				<u--input v-model="form.password" placeholder="密码" border="none" type="password" clearable></u--input>
			</u-form-item>
			<u-form-item>
				<u-button @tap="login" :disabled="loading" type="primary"  shape="circle">{{!loading ? '登 录' : '登录中...'}}</u-button>
			</u-form-item>
		</u--form>
			</view>
      <view class="other-item">
        <view @tap="status=3">忘记密码？</view>
      </view>
     </view>
     <!-- 验证码快捷登录 -->
     <view v-else-if="status==2">
        <view class="from-type">
       <view>验证码快捷登录</view>
        <span @tap="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </view>
      <view class="form-uni">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="form2" errorType="toast">
			<u-form-item prop="account" borderBottom  >
				<u--input v-model="form.account" placeholder="手机号 / 邮箱" border="none" clearable></u--input>
			</u-form-item>
			<u-form-item  prop="code" borderBottom  >
				<u--input v-model="form.code" placeholder="验证码" type="number" border="none" clearable>
					<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" changeText="X秒重新获取" ></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini" ></u-button>
				</template>
				</u--input>
			</u-form-item>
			<u-form-item>
				<u-button @tap="LogInToregister" :disabled="loading" type="primary"  shape="circle">{{!loading ? '登 录' : '登录中...'}}</u-button>
			</u-form-item>
		</u--form>
			</view>
     </view>
       <!-- 通过手机/邮箱重设密码 -->
     <view v-else-if="status==3">
        <view class="from-type">
       <view>通过手机/邮箱重设密码</view>
        <span @tap="status=1">账户密码登录<i class="iconfont icon-xiangyoujiantou"></i></span>
      </view>
			<view class="form-uni">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="form3" errorType="toast">
			<u-form-item prop="account" borderBottom  >
				<u--input v-model="form.account" placeholder="手机号 / 邮箱" border="none" clearable></u--input>
			</u-form-item>
			<u-form-item  prop="code" borderBottom  >
				<u--input v-model="form.code" placeholder="验证码"  type="number" border="none" clearable>
					<template slot="suffix">
					<u-code ref="uCode"  changeText="X秒重新获取" ></u-code>
					<u-button @tap="getCode" :text="tips" type="success" size="mini" ></u-button>
				</template>
				</u--input>
			</u-form-item>
			<u-form-item  prop="password" borderBottom  >
				<u--input v-model="form.password" placeholder="密码" border="none" type="password" clearable></u--input>
			</u-form-item>
			<u-form-item>
				<u-button @tap="resetPassword" :disabled="loading" type="primary"  shape="circle">{{!loading ? '重设密码' : '重设密码中...'}}</u-button>
			</u-form-item>
		</u--form>
			</view>

      <view class="other-item">
              <view @tap="status=1">想起密码？</view>
       </view>
     </view>
    </view>
    <view v-if="status!=3" class="other">
        <ul>
					<li><a :href="weChatUrl"></a><i class="iconfont icon-weixin"></i></a></li>
          <li><i class="iconfont icon-qq"></i></li>
          <li><i class="iconfont icon-xinlangweibo"></i></li>
          <li><i class="iconfont icon-shejiaotubiao-09"></i> </li>
          <li><i class="iconfont icon-weiruan"></i></li>
          <a :href="githubUrl"><li><i class="iconfont icon-github"></i></li></a>
        </ul>
    </view>
     <view v-if="status!=3"  class="from-reading">
          登录注册即代表同意xx<span>《用户协议》</span>和<span>《隐私协议》</span>
        </view>
	</view>
</template>

<script>
import { validMobile, validEmail } from '@/utils/validate.js'
import { mapActions } from 'vuex'
import { getVerifyCode } from '@/api/verifyCode'
	export default {
		data() {
			return {
				tips: '',
				githubUrl: 'https://github.com/login/oauth/authorize?client_id=88f028142403410abfef&redirect_uri=http://127.0.0.1:8888/dashboard',
      weChatUrl: 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxd4a837c38b866355&redirect_uri=http://127.0.0.1:8888/dashboard&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect',
      status: 2,
      loading: false,
      time: 1000 * 60,
      logo: require('@/static/img/loginLogo.png'),
      form: {
        account: null,
        password: null,
        code: null
      },
			rules:{
				account: {
					required: true,
					message: '请填写账号',
					trigger: ['blur', 'change']
				},
				password: [
					{
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					},
					{
								min: 6,
								message: '密码长的不能小于6个字符'
							},
				],
				code: [
					{
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					{
								min: 6,
								max: 6,
								message: '验证码应该是6位数字'
							},
				]
			}
			};
		},
		onReady() {
		//onReady 为uni-app支持的生命周期之一
		// this.$refs.form1.setRules(this.rules)
    	this.$refs.form2.setRules(this.rules)
			// this.$refs.form3.setRules(this.rules)
},
		methods: {
			...mapActions(['user/login', 'user/quick', 'user/quickUpdatePassword']),
			back(){
				uni.navigateBack()
			},
			// 验证码提示
			codeChange(text) {
        this.tips = text;
      },
			// 获取验证码
      async getCode() {
				if (!validMobile(this.form.account) && !validEmail(this.form.account)) {
        return uni.showToast({icon: 'none',title: '请输入有效的账号'});
      }
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
					const VerifyCode = await getVerifyCode({ account: this.form.account })
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					console.log(VerifyCode)
					 // 通知验证码组件内部开始倒计时
					 this.$refs.uCode.start();
        } else {
          uni.$u.toast(this.tips);
        }
      },
      change(e) {
        console.log('change', e);
      },
			// 微信登录
    async weChatLogin () {
      // const weChatCode = window.location.href.split('?code=')[1].split('&')
      // const res = await weChatLogin({ code: weChatCode[0] })
      // console.log(res)
      // this.$message.success('WeChat登录成功')
    },
		// gitHub登录
    async gitHubLogin () {
      // const str = window.location.href.substr(window.location.href.indexOf('code=') + 5)
      // const Code = str.substr()
      // const res = await gitHubLogin({ code: Code })
      // console.log(res)
      // this.$message.success('gitHub登录成功')
    },
    // 账号密码登录
    login () {
			this.$refs.form1.validate().then(async res => {
				if (!validMobile(this.form.account) && !validEmail(this.form.account)) {
				  return uni.$u.toast('请输入有效的账号');
				}
				this.loading = true
				try {
				  await this['user/login'](this.form)
				  // 登录成功，跳转回原来的页面
				  // this.$router.push(this.$route.query.redirect || '/')
					this.back()
				  this.form = {}
				} catch (error) {
				}
				this.loading = false
			})
    },
    // 验证码快捷登录 或注册
    LogInToregister () {
			this.$refs.form2.validate().then(async res => {
				if (!validMobile(this.form.account) && !validEmail(this.form.account)) {
				  return uni.$u.toast('请输入有效的账号');
				}
				this.loading = true
				try {
				  await this['user/quick'](this.form)
				  // 登录成功，跳转回原来的页面
				  // this.$router.push(this.$route.query.redirect || '/')
					this.back()
				  this.form = {}
				} catch (error) {
					
				}
				this.loading = false
			})
    },
    // 验证码快捷修改密码
    resetPassword () {
			this.$refs.uForm.validate().then(async res => {
				this.loading = true
				try {
				  await this['user/quickUpdatePassword'](this.form)
					uni.$u.toast('重置密码成功');
				  this.form = {}
				} catch (error) {
				}
				this.loading = false
				this.status = 1
			})
      
    }
		},
	}
</script>

<style lang="scss">
.logo{
  position: relative;
  padding:100px 0px 100px 0px;
	display: flex;
    justify-content: center;
  .back{
    position: absolute;
    top:20px;
    left:20px;
    .icon-cha{
      font-size:20px;
    }
  }
}
.form{
  .from-type{
    display:flex;
    justify-content:space-between;
    height: 20px;
    line-height: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    font-size:16px;
    view:nth-child(1){
			font-size: 20px;
    font-weight: 500;
    border-left: 3px solid #328BF9;
    padding-left: 15px;
    }
     span{
       color: #328BF9;
       .icon-xiangyoujiantou{
         font-size:13px;
       }
    }
  }
}
.form-uni{
	padding: 0px 15px 20px 15px;
}
.other-item{
	display: flex;
    justify-content: space-between;
    margin-left: 15px;
    font-size: 14px;
    color: #666363;
 }
.other{
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  position:absolute;
  bottom: 40px;
  margin-bottom: 20px;
  ul{
    display:flex;
    justify-content: space-evenly;
    list-style:none;
		padding: 0;
    li:hover{
      border:1px solid #25abef;
    }
    li{
      display: flex;
      align-items: center;
      justify-content: center;
      // cursor: pointer;
      margin: 0px 2px;
      width: 33px;
      height: 33px;
      border:1px solid #e5e7e8;
      border-radius: 100px;
    }
  }
    .iconfont{
      font-size:18px;
    }
    .icon-weixin{
      color: rgb(74, 221, 51);
    }
    .icon-qq{
      //  font-size:16px;
      color: rgb(87, 139, 222);
    }
    .icon-xinlangweibo{
      color: rgb(244, 94, 75);
    }
    .icon-shejiaotubiao-09{
      color: rgb(93, 140, 241);
    }
    .icon-weiruan{
      color: rgb(93, 140, 241);
    }
     .icon-github{
      color: rgb(10, 24, 54);
    }
}
.from-reading{
  position: absolute;
    width: 100%;
    bottom: 20px;
    font-size: 12px;
    text-align: center;
    margin: 0 auto;
    span{
      color: #328BF9;
    }
}
</style>
